Rodrigo

Hi @CamiMarie and welcome to the GSAP Forums! I'm very far from being an experienced wordpress developer, in fact I know very little about it, so I couldn't really tell you what to do. Maybe if you have access to the template create a unique id or class that you can use as a selector in your code. Sorry I can't be of more assistance. Happy Tweening!

Hi @Ayush3513 and welcome to the GSAP Forums! That's basically a CSS issue rather than a GSAP one. You're using the scroller config in ScrollTrigger, that basically tells ScrollTrigger to look for the scroll position in that element, by default ScrollTrigger will look for the scroll position in the main window element. Then your main element doesn't have a fixed height so it stretches out to the height of it's children, because of that there is no scroll inside that element. There are two options: Use the default scroller in your ScrollTrigger configuration: gsap.to("#page2 #box2", { x: 400, y: 400, duration: 4, scrollTrigger: { trigger: "#page2 #box2", markers: true, scrub: 2 } }); https://codepen.io/GreenSock/pen/vYwEXRZ Give your main element a height of 100vh: .main { height: 100vh; overflow: auto; } https://codepen.io/GreenSock/pen/rNgaMvB Hopefully this helps. Happy Tweening!

Hi, Actually they're using clip-path inset with round: clip-path: inset(4rem 20% round 1rem 2rem 3rem 4rem); https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/inset If you inspect with devtools you'll see this: element.style { clip-path: inset(2.87718% round 20.2554px); } You should have a look at this thread: Hopefully this helps. Happy Tweening!

Hi, This post by @PointC has an excellent demo for achieving that: Happy Tweening!

Hi, The only Easing functions that accept values that are not documented are Back and Elastic. In the case of the Back easing function the value is pretty simple: gsap.to(target, { duration:1, ease: "back.in(1)", }); The bigger the value, the back easing (in/out) is bigger as well. The Ease Visualizer has dropdowns so you can play around and check that for yourself: For the elastic easing function the first value is for the strength the elastic motion will have, for smaller values the stretching (for lack of a better word) or overshoot is larger: In the second parameter I'm a little fuzzy in terms of what it actually is or how to correctly call it. The simplest way I can use to describe it is the frequency (repetitions) that leads to the ease to either increase (ease in) from a linear easing, or decrease (ease out) to a linear easing, based on the progress of the tween, that's why those values range between 0 and 1. Any other easing function that takes values is documented in our docs: Hopefully this helps. Happy Tweening!

Hi, I don't have time now to dig into your code, but you could check @Carl's video on staggers and sequences: Hopefully this helps. Happy Tweenig!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/VwOwymP Hopefully this helps. Happy Tweening!

Hey Fernando! I don't know if there is a single demo around that does everything you need, so most likely this will reduce to get inspiration and bits from several of them. Here are others that can definitely help: https://codepen.io/GreenSock/pen/poBRQRj https://codepen.io/GreenSock/pen/BaMOapv https://codepen.io/GreenSock/pen/rNbELKO https://codepen.io/GreenSock/pen/xxjErmp https://codepen.io/GreenSock/pen/wvrXRdZ It's always a good idea to keep these collections in your bookmarks just in case: https://codepen.io/collection/AEbkkJ https://codepen.io/collection/DkvGzg Hopefully this helps, Happy Tweening!

Hi @BiKe and welcome to the GSAP Forums! Maybe this demo can help: https://codepen.io/GreenSock/pen/YzgGwpM Hopefully this helps, Happy Tweening!

Hi, Sorry but I really don't understand what the issue is here exactly. I tested your demo and tried different screen sizes and everything is working as it should. The only advice I would offer is to not make the body tag a flex container. Also I would advice you to create the ScrollTrigger that is pinning the container after creating the ScrollTriggers of the tabs, since those are not pinned they don't affect the start/end position of the pinned one, but the pinned one does have an impact because of the pin space is created. I'm not sure if you're looking for something like this: https://codepen.io/GreenSock/pen/GRaROvZ Hopefully this helps. Happy Tweening!

Hi, I believe the issue starts with the first error you have in the console there, then it kinds of dominoes in the wrong way with ScrollTrigger somehow. Without a minimal demo that clearly illustrates the issue, there is not a lot we can do I'm afraid. I haven't seen any issue like that when deploying to Netlify react/next and vue/nuxt apps before, so I couldn't tell you what the issue is 🤷‍♂️ Sorry I can't be of more assistance 😞 Happy Tweening!

Hi, Use autoAlpha instead of opacity: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/#autoalpha Hopefully this helps. Happy Tweening!

Hi, I think you should simplify your approach a little bit, get the animation with ScrollTrigger working first and then add snapping to the mix. I recommend you to have a look at this threads in order to better grasp the stacking card concept: Hopefully this helps. Happy Tweening!

Hi, That demo uses ScrollTrigger's observe which has been ported into the Observer Plugin: https://gsap.com/docs/v3/Plugins/Observer/ Here are a couple of demos that show how to integrate ScrollTrigger and Observer: https://codepen.io/GreenSock/pen/ExEOeJQ https://codepen.io/GreenSock/pen/oNdNLxL Hopefully this helps. Happy Tweening!

Sorry about the issues but without a minimal demo that clearly illustrates the problem there is not a lot we can do. The only thing I can see in your code is that you have the isTweening boolean commented out in your onUp and onDown callbacks, so that will definitely won't work: // let isTweening = false; // console.log(isTweening); // Observer For Timeline Observer.create({ type: "wheel, touch, pointer, touchmove", target: window, preventDefault: true, wheelSpeed: -1, tolerance: 100, dragMinimum: window.innerWidth >= 480 ? 100 : 20, onUp: () => { // if (isTweening) return; // isTweening = true; // console.log(isTweening); if (mastertl.totalProgress() < 1) { mastertl.play(); } }, onDown: () => { // if (isTweening) return; // isTweening = true; // console.log(isTweening); if (mastertl.totalProgress() <= 1) { mastertl.reverse(); } }, }); Sorry I can't be of more assistance. Happy Tweening!